<template>
  <div id="topAnchor">
    <userHeader></userHeader>
    <div class="box">
      <div class="little-box">
        <ul class="little-little-box">
          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000001.jpg" alt />
              <span>与你有关的驾驶安全</span>
            </div>
            <span class="visits">该圆桌被浏览 107469140次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000002.jpg" alt />
              <span>数据分析入门指南</span>
            </div>
            <span class="visits">该圆桌被浏览 9789862次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000003.jpg" alt />
              <span>国货正当潮</span>
            </div>
            <span class="visits">该圆桌被浏览 294006301次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000007.jpg" alt />
              <span>理想家庭</span>
            </div>
            <span class="visits">该圆桌被浏览 40902380次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000008.jpg" alt />
              <span>2019 诺贝尔奖巡礼</span>
            </div>
            <span class="visits">该圆桌被浏览 374633543次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000009.jpg" alt />
              <span>母校的故事</span>
            </div>
            <span class="visits">该圆桌被浏览 458121151次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000010.jpg" alt />
              <span>航空之美|非常想问</span>
            </div>
            <span class="visits">该圆桌被浏览 4891135479次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000011.jpg" alt />
              <span>实现投资自由</span>
            </div>
            <span class="visits">该圆桌被浏览 7948155254次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000012.jpg" alt />
              <span>校招季|地产求职</span>
            </div>
            <span class="visits">该圆桌被浏览 34918030次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000013.jpg" alt />
              <span>好书看得见</span>
            </div>
            <span class="visits">该圆桌被浏览 44207130次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000014.jpg" alt />
              <span>edc|每日出行装备</span>
            </div>
            <span class="visits">该圆桌被浏览 5634510次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000015.jpg" alt />
              <span>大球小球70年</span>
            </div>
            <span class="visits">该圆桌被浏览 103247616次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000016.jpg" alt />
              <span>新手爸妈进化论</span>
            </div>
            <span class="visits">该圆桌被浏览 116702468次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000017.jpg" alt />
              <span>我终于有猫了</span>
            </div>
            <span class="visits">该圆桌被浏览 128938792次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000018.jpg" alt />
              <span>心动的[信号]|非常想问</span>
            </div>
            <span class="visits">该圆桌被浏览 31892711次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000019.jpg" alt />
              <span>进击吧，机器人</span>
            </div>
            <span class="visits">该圆桌被浏览 20636186次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000020.jpg" alt />
              <span>我太难了</span>
            </div>
            <span class="visits">该圆桌被浏览 115115884次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000021.jpg" alt />
              <span>科研新手指南</span>
            </div>
            <span class="visits">该圆桌被浏览 848114941次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000022.jpg" alt />
              <span>如何白成一道光</span>
            </div>
            <span class="visits">该圆桌被浏览 39551192次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000023.jpg" alt />
              <span>直击苹果秋季发布会</span>
            </div>
            <span class="visits">该圆桌被浏览 6908235次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000024.jpg" alt />
              <span>篮球世界杯落下帷幕</span>
            </div>
            <span class="visits">该圆桌被浏览 8191948498次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000025.jpg" alt />
              <span>英雄联盟，无限热爱</span>
            </div>
            <span class="visits">该圆桌被浏览 25595955次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000026.jpg" alt />
              <span>校园新生进阶之道</span>
            </div>
            <span class="visits">该圆桌被浏览 11894492次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000027.jpg" alt />
              <span>辐射可怕吗|非常想问</span>
            </div>
            <span class="visits">该圆桌被浏览 9194451次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000028.jpg" alt />
              <span>瓦力实验室|说话太难了</span>
            </div>
            <span class="visits">该圆桌被浏览 1331444944次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000029.jpg" alt />
              <span>开学装备大升级</span>
            </div>
            <span class="visits">该圆桌被浏览 15499959次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000030.jpg" alt />
              <span>带你看世界|天生运动家</span>
            </div>
            <span class="visits">该圆桌被浏览 914944次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000031.jpg" alt />
              <span>青少年的职业观</span>
            </div>
            <span class="visits">该圆桌被浏览 5916216次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000032.jpg" alt />
              <span>好奇星人|我才不气呢</span>
            </div>
            <span class="visits">该圆桌被浏览 6888881次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000033.jpg" alt />
              <span>非常想问|一口好牙</span>
            </div>
            <span class="visits">该圆桌被浏览 11116655次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000034.jpg" alt />
              <span>Ti9,英雄不朽</span>
            </div>
            <span class="visits">该圆桌被浏览 3949449次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000035.jpg" alt />
              <span>看球 · 足坛「新」势力</span>
            </div>
            <span class="visits">该圆桌被浏览 10554334 次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000036.jpg" alt />
              <span>制躁一个夏天</span>
            </div>
            <span class="visits">该圆桌被浏览 48911874 次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000037.jpg" alt />
              <span>非常想问|重返月球</span>
            </div>
            <span class="visits">该圆桌被浏览 315646446次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000038.jpg" alt />
              <span>夏季动画大作战</span>
            </div>
            <span class="visits">该圆桌被浏览 15226464 次</span>
          </li>

          <li>
            <div class="little-little-box-image">
              <img src="../assets/img/table/ia_100000039.jpg" alt />
              <span>当科幻变为现实</span>
            </div>
            <span class="visits">该圆桌被浏览 108888631 次</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="unit-inner">
      <div class="module-header">
        <h3>主办方</h3>
      </div>
      <div class="module-body">
        <ul class="items">
          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000074.jpg" class="avatar d50" />
                <a href class="name">知乎圆桌</a>
                <div class="bio">举办过345次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000076.jpg" class="avatar d50" />
                <a href class="name">户外探险杂志</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000077.jpg" class="avatar d50" />
                <a href class="name">世界卫生组织(WHO)</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000078.jpg" class="avatar d50" />
                <a href class="name">宝马中国</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000079.jpg" class="avatar d50" />
                <a href class="name">机器之心</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000080.jpg" class="avatar d50" />
                <a href class="name">安瑞传媒</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000081.jpg" class="avatar d50" />
                <a href class="name">《看电影》杂志</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000082.jpg" class="avatar d50" />
                <a href class="name">银华基金</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000083.jpg" class="avatar d50" />
                <a href class="name">冠军欧洲（电视栏目）</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000084.jpg" class="avatar d50" />
                <a href class="name">法大大</a>
                <div class="bio">举办过2次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000085.jpg" class="avatar d50" />
                <a href class="name">京东金融</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000086.jpg" class="avatar d50" />
                <a href class="name">璇玑</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000087.jpg" class="avatar d50" />
                <a href class="name">腾云智库</a>
                <div class="bio">举办过2次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000088.jpg" class="avatar d50" />
                <a href class="name">乘风破浪（电影）</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000089.jpg" class="avatar d50" />
                <a href class="name">PayPal</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000090.jpg" class="avatar d50" />
                <a href class="name">穷游锦囊（品牌）</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000091.jpg" class="avatar d50" />
                <a href class="name">单向空间</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000092.jpg" class="avatar d50" />
                <a href class="name">腾讯体育</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000093.jpg" class="avatar d50" />
                <a href class="name">云峰金融</a>
                <div class="bio">举办过2次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000094.jpg" class="avatar d50" />
                <a href class="name">DJI 大疆创新</a>
                <div class="bio">举办过2次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000095.jpg" class="avatar d50" />
                <a href class="name">刘看山城市冰屋</a>
                <div class="bio">举办过2次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000096.jpg" class="avatar d50" />
                <a href class="name">以太资本</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000097.jpg" class="avatar d50" />
                <a href class="name">钱学森空间技术实验室</a>
                <div class="bio">举办过3次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000098.jpg" class="avatar d50" />
                <a href class="name">知识分子</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000099.jpg" class="avatar d50" />
                <a href class="name">丁香医生</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000100.jpg" class="avatar d50" />
                <a href class="name">迪士尼（The Walt Disney Company）</a>
                <div class="bio">举办过3次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000101.jpg" class="avatar d50" />
                <a href class="name">方正字库</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000102.jpg" class="avatar d50" />
                <a href class="name">北面（The North Face）</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000103.jpg" class="avatar d50" />
                <a href class="name">中国科普博览</a>
                <div class="bio">举办过7次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000104.jpg" class="avatar d50" />
                <a href class="name">追光动画</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000105.jpg" class="avatar d50" />
                <a href class="name">哔哩哔哩</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000106.jpg" class="avatar d50" />
                <a href class="name">陌陌</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000107.jpg" class="avatar d50" />
                <a href class="name">奔驰Smart</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000108.jpg" class="avatar d50" />
                <a href class="name">乌云（WooYun）</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000109.jpg" class="avatar d50" />
                <a href class="name">壹基金</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000110.jpg" class="avatar d50" />
                <a href class="name">华大基金</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000111.jpg" class="avatar d50" />
                <a href class="name">世界自然基金会（WWF）</a>
                <div class="bio">举办过2次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000112.jpg" class="avatar d50" />
                <a href class="name">联想之星</a>
                <div class="bio">举办过1次圆桌</div>
              </a>
            </div>
          </li>

          <li class="item">
            <div class="item-header">
              <a href class="item-link" tabindex="-1">
                <img src="../assets/img/table/ia_100000113.jpg" class="avatar d50" />
                <a href class="name">班夫山地电影节</a>
                <div class="bio">举办过2次圆桌</div>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- <a href="#topAnchor" class="jiantou">
      <img src="../assets/img/table/xlr.png" alt />
    </a> -->
  </div>
</template>



<script>
import userHeader from "../components/headers/UserHeader";
export default {
  components: {
    userHeader
  }
};
</script>

<style>
* {
}
.box {
  width: 714px;
  height: 3592px;
  margin-left: 445px;
  margin-top: 62px;
}
.little-box {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.little-little-box {
  width: 100%;
  height: 271px;
}
.little-box li {
  cursor: pointer;
  position: relative;
  list-style: none;
  float: left;
  border: 1px #d3d9de solid;
  border-radius: 3px;
  margin-right: 30px;
  margin-bottom: 30px;
  width: 200px;
  height: 250px;
  line-height: 337px;
  font-size: 15px;
  color: #fff;
}

.visits {
  position: absolute;
  left: 0px;
  display: inline-block;
  width: 200px;
  height: 50px;
  color: #778087;
  background-color: #fff;
  line-height: 3;
}

.little-little-box div {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
}

.little-little-box-image span {
  position: absolute;
  width: 100%;
  height: 0px;
  display: inline-block;
  left: 7px;
  top: 9px;
  font-size: 15px;
}
/* ======================================================================================================================== */

.unit-inner {
  margin-top: -3590px;
  margin-left: 1194px;
  width: 274px;
  height: 3309px;
  border-radius: 3px;
  border: 1px solid #d3d9de;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  background-color: #fff;
}
.module-header {
  height: 30px;
  padding: 0.5em 0.8em;
  width: 252px;
  line-height: 0px;
  font-size: 14px;
  border-bottom: 1px solid #eaf0f5;
  border-radius: 3px 3px 0 0;
  background: #f9fafb;
}
.module-body {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.items {
  margin: 0;
  list-style: none;
  padding-left: 0px;
}
.item {
  padding: 0.5em 0;
  color: #778087;
  background-color: #fff;
  border-top: 0.5px solid #e3e7eb;
  border-bottom: 0.5px solid #e3e7eb;
}
.item-header {
  position: relative;
  padding: 0.5em 0.8em;
  overflow: hidden;
  background-color: #fff;
}
.item-link {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 0.8em;
}
.name {
  position: absolute;
  left: 74px;
  color: inherit;
  font-size: 15px;
  background-color: #fff;
  color: #778087;
}
.bio {
  position: absolute;
  left: 72px;
  top: 36px;
  font-size: 15px;
  background-color: #fff;
  color: #778087;
}
.jiantou {
  position: fixed;
  right: 668px;
  bottom: 104px;
}
</style>